<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            height: 20px;
            width: 200px;
            margin: 10px auto;
            border: 1px solid red;
            position: relative;
        }

        #inner {
            height: 20px;
            background-color: red;
        }

        #result {
            position: absolute;
            left: 200px;
            top: 0;

        }
    </style>
</head>
<body>

<div id="wrap">
    <div id="inner" style="width: 0"></div>
    <span id="result">0%</span>
</div>
</body>
<script>
    var inner = document.getElementById("inner");
    var result = document.getElementById("result");
    var timer = null;
    timer = setInterval(function () {
        //console.log(inner.style.width);
        inner.style.width = parseInt(inner.style.width) + 2 + "px";

        var score =(parseInt(inner.style.width))/200;
        result.innerHTML = parseInt(score*100)+"%";


        if (parseInt(inner.style.width) == 200) {
            clearInterval(timer);
        }
    }, 100);

</script>
</html>